<template>
  <el-row id="Other">
    <div class="othertitle">
      <img src="../../assets/img/homeimg/home_icon_else@2x (1).png" alt />
      <span>其它</span>
    </div>
    <!--第一个模块联盟店销售排行-->
    <div class="othervipshop">
      <p>联盟店消费排行</p>
      <div class="othervipshop-news">
        <div class="otherbutton">
          <ul>
            <li
              class="aa"
              :class="{red:changeRed == index}"
              @click="change1(index)"
              v-for="(list,index) in siYuan1"
              :key="index"
            >{{list.a}}</li>
          </ul>
        </div>
        <div class="other-table">
          <el-table
            :data="tableData1"
            style="width: 100%"
            :default-sort="{prop: 'date', order: 'descending'}"
            size="mini"
          >
            <el-table-column
              type="index"
              :index="indexMethod"
              label="排名"
              width="100"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="goodsName"
              show-overflow-tooltip
              label="店铺"
              width="140"
              align="center"
            ></el-table-column>
            <el-table-column prop="volume" label="成交量" sortable width align="center"></el-table-column>
            <el-table-column
              prop="transactionAmount"
              label="成交金额"
              align="center"
              width="140"
              :formatter="formatter"
            ></el-table-column>
          </el-table>
        </div>
      </div>
      <div class="timeitemone" v-if="timeitemone">
        <div class="block">
          <p>组件值：{{ value14 }}</p>
          <el-date-picker
            id="timefivetime"
            v-model="value14"
            type="daterange"
            size="mini"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="picker001"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </div>
      </div>
    </div>
    <!--第二个模块热搜排行-->
    <div class="othervipshop">
      <p>热搜排行</p>
      <div class="othervipshop-news">
        <div class="otherbutton2">
          <ul>
            <li
              class="aa"
              :class="{red:onchangeRed == index}"
              @click="change2(index)"
              v-for="(list,index) in siYuan2"
              :key="index"
            >{{list.a2}}</li>
          </ul>
        </div>
        <div class="other-table">
          <el-table
            :data="tableData2"
            style="width: 100%"
            :default-sort="{prop: 'date', order: 'descending'}"
            size="mini"
          >
            <el-table-column
              type="index"
              :index="indexMethod"
              label="排名"
              width="140"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="goodsName"
              show-overflow-tooltip
              label="热词"
              width="200"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="volume"
              label="搜索量"
              width="120"
              align="center"
              :formatter="formatter"
            ></el-table-column>
          </el-table>
        </div>
        <div class="timeitemtwo" v-if="timeitemtwo">
          <div class="block">
            <p>组件值：{{ value15 }}</p>
            <el-date-picker
              id="timefivetime"
              v-model="value15"
              type="daterange"
              size="mini"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              @change="picker002"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </div>
        </div>
      </div>
    </div>
    <!--第三个模块热搜排行-->
    <div class="othervipshop">
      <p>会员商城消费排行</p>
      <div class="othervipshop-news">
        <div class="otherbutton3">
          <ul>
            <li
              class="aa"
              :class="{red:onreadychangeRed == index}"
              @click="change3(index)"
              v-for="(list,index) in siYuan3"
              :key="index"
            >{{list.a3}}</li>
          </ul>
        </div>
        <div class="other-table">
          <el-table
            :data="tableData3"
            style="width: 100%"
            :default-sort="{prop: 'date', order: 'descending'}"
            size="mini"
          >
            <el-table-column
              type="index"
              :index="indexMethod"
              label="排名"
              width="120"
              align="center"
            ></el-table-column>
            <el-table-column prop="goodsName" label="会员" width align="center"></el-table-column>
            <el-table-column prop="volume" label="单量" sortable width align="center"></el-table-column>
            <el-table-column
              prop="transactionAmount"
              label="成交金额"
              align="center"
              :formatter="formatter"
            ></el-table-column>
          </el-table>
        </div>
        <div class="timeitemthree" v-if="timeitemthree">
          <div class="block">
            <p>组件值：{{ value16 }}</p>
            <el-date-picker
              id="timefivetime"
              v-model="value16"
              type="daterange"
              size="mini"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
              @change="picker003"
            ></el-date-picker>
          </div>
        </div>
      </div>
    </div>
    <!--第四个模块热搜排行-->
    <div class="othervipshop">
      <p>会员联盟店消费排行</p>
      <div class="othervipshop-news">
        <div class="otherbutton4">
          <ul>
            <li
              class="aa"
              :class="{red:onreadylistchangeRed == index}"
              @click="change4(index)"
              v-for="(list,index) in siYuan4"
              :key="index"
            >{{list.a4}}</li>
          </ul>
        </div>
        <div class="other-table">
          <el-table
            :data="tableData4"
            style="width: 100%"
            :default-sort="{prop: 'date', order: 'descending'}"
            size="mini"
          >
            <el-table-column
              type="index"
              :index="indexMethod"
              label="排名"
              width="100"
              align="center"
            ></el-table-column>
            <el-table-column prop="goodsName" label="会员" width="150" align="center"></el-table-column>
            <el-table-column prop="volume" label="单量" sortable width="110" align="center"></el-table-column>
            <el-table-column
              prop="transactionAmount"
              label="成交金额"
              width="120"
              align="center"
              :formatter="formatter"
            ></el-table-column>
          </el-table>
        </div>
        <div class="timeitemfour" v-if="timeitemfour">
          <div class="block">
            <p>组件值：{{ value17 }}</p>
            <el-date-picker
              id="timefivetime"
              v-model="value17"
              type="daterange"
              size="mini"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
              @change="picker004"
            ></el-date-picker>
          </div>
        </div>
      </div>
    </div>
    <!--第五个模块复购率统计排行-->
    <div class="othervipshop">
      <p>复购率统计</p>
      <div class="othervipshop-news">
        <div class="other-table">
          <el-table
            :data="tableData5"
            style="width: 100%"
            :default-sort="{prop: 'date', order: 'descending'}"
            size="mini"
            id="otherfive"
          >
            <el-table-column prop="goodsName" label="时间" width="100" align="center" height="40"></el-table-column>
            <el-table-column prop="volume" label="用户样本数量" width align="center" height="40"></el-table-column>
            <el-table-column
              prop="repeatPurchaseCount"
              label="用户复购量"
              width
              align="center"
              height="40"
            ></el-table-column>
            <el-table-column
              prop="repeatPurchaseRate"
              label="复购率"
              :formatter="formatter"
              align="center"
              height="40"
            ></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </el-row>
</template>
<script>
export default {
  name: "Other",
  data() {
    return {
      messag: "",
      tableData1: [],
      tableData2: [],
      tableData3: [],
      tableData4: [],
      tableData5: [],
      siYuan1: [{ a: "近7天排行" }, { a: "近30天排行" }, { a: "自定义时间" }],
      siYuan2: [
        { a2: "近7天排行" },
        { a2: "近30天排行" },
        { a2: "自定义时间" }
      ],
      siYuan3: [
        { a3: "近7天排行" },
        { a3: "近30天排行" },
        { a3: "自定义时间" }
      ],
      siYuan4: [
        { a4: "近7天排行" },
        { a4: "近30天排行" },
        { a4: "自定义时间" }
      ],
      changeRed: -1,
      onchangeRed: -1,
      onreadychangeRed: -1,
      onreadylistchangeRed: -1,
      timeitemone: false,
      timeitemtwo: false,
      timeitemfour: false,
      value14: "",
      value15: "",
      value15: "",
      value16: "",
      value17: "",
      timeitemthree: false,
      index: "",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      }
    };
  },
  created() {
    this.getData();
    this.change4(0);
    this.change3(0);
    this.change2(0);
    this.change1(0);
  },
  mounted() {
    this.otherGetDate();
    this.change1();
    this.change2();
    this.change3();
    this.change4();
    // this.index1();
    this.indexMethod();
    this.picker001();
    this.picker002();
    this.picker003();
    this.picker004();
  },
  methods: {
    otherGetDate(row, column) {
      if (row !== undefined) {
        return row.money;
      }
    },
    indexMethod(index) {
      return index + 1;
    },
    change4(index) {
      this.onreadylistchangeRed = index;
      this.index = index;
      var _that = this;
      if (index == 2) {
        _that.timeitemfour = true;
      } else {
        _that.timeitemfour = false;
      }
      if (index == 0) {
        _that.timeRange = 1;
      }
      if (index == 1) {
        _that.timeRange = 2;
      }
      this.$http({
        url: this.$http.adornUrl("/home/queryConsumptionRanking"),
        method: "get",
        params: this.$http.adornParams(
          {
            timeRange: _that.timeRange,
            type: "7",
            sortType: true
          },
          false
        )
      })
        .then(({ data }) => {
          if (data && data.code === 0) {
            _that.tableData4 = data.data;
          } else {
          }
        })
        // .catch(err => {
        //   console.log(err, "会员联盟消费排行加载失败");
        // });
    },
    change3(index) {
      this.onreadychangeRed = index;
      var _that = this;
      this.index = index;
      if (index == 2) {
        _that.timeitemthree = true;
      } else {
        _that.timeitemthree = false;
      }
      if (index == 0) {
        _that.timeRange = 1;
      }
      if (index == 1) {
        _that.timeRange = 2;
      }
      this.$http({
        url: this.$http.adornUrl("/home/queryConsumptionRanking"),
        method: "get",
        params: this.$http.adornParams(
          {
            timeRange: _that.timeRange,
            type: "6",
            sortType: true
          },
          false
        )
      })
        .then(({ data }) => {
          if (data && data.code === 0) {
            _that.tableData3 = data.data;
          } else {
          }
        })
        // .catch(err => {
        //   console.log(err, "会员商城消费排行执行失败");
        // });
    },
    change2(index) {
      this.onchangeRed = index;
      var _that = this;
      this.index = index;
      if (index == 2) {
        _that.timeitemtwo = true;
      } else {
        _that.timeitemtwo = false;
      }
      if (index == 0) {
        _that.timeRange = 1;
      }
      if (index == 1) {
        _that.timeRange = 2;
      }
      this.$http({
        url: this.$http.adornUrl("/home/queryConsumptionRanking"),
        method: "get",
        params: this.$http.adornParams(
          {
            timeRange: _that.timeRange,
            type: "5",
            sortType: "true"
          },
          false
        )
      })
        .then(({ data }) => {
          if (data && data.code === 0) {
            _that.tableData2 = data.data;
          } else {
          }
        })
        // .catch(err => {
        //   console.log(err, "执行失败");
        // });
    },
    change1(index) {
      
      this.changeRed = index;
      var _that = this;
      this.index = index;
      if (index == 2) {
        _that.timeitemone = true;
      } else {
        _that.timeitemone = false;
      }
      if (index == 0) {
        _that.timeRange = 1;
      }
      if (index == 1) {
        _that.timeRange = 2;
      }
      this.$http({
        url: this.$http.adornUrl("/home/queryConsumptionRanking"),
        method: "get",
        params: this.$http.adornParams(
          {
            timeRange: _that.timeRange,
            type: "4",
            sortType: "true"
          },
          false
        )
      })
        .then(({ data }) => {
          if (data && data.code === 0) {
            _that.tableData1 = data.data;
          } else {
          }
        })
        // .catch(err => {
        //   console.log(err, "执行失败");
        // });
    },
    picker004(value17) {
      var _that = this;
      if (this.index == 0) {
        _that.timeRange = 1;
      }
      if (this.index == 1) {
        _that.timeRange = 2;
      }
      if (this.index == 2) {
        _that.timeRange = value17[0] + "~" + value17[1];
      }
      this.$http({
        url: this.$http.adornUrl("/home/queryConsumptionRanking"),
        method: "get",
        params: this.$http.adornParams({
          timeRange: _that.timeRange,
          type: "7",
          sortType: true
        })
      })
        .then(({ data }) => {
          if (data && data.code === 0) {
            _that.tableData4 = data.data;
          } else {
          }
        })
        // .catch(err => {
        //   console.log(err, "会员联盟消费排行加载失败");
        // });
    },
    picker003(value16) {

      var _that = this;
      if (this.index == 0) {
        _that.timeRange = 1;
      }
      if (this.index == 1) {
        _that.timeRange = 2;
      }
      if (this.index == 2) {
        _that.timeRange = value16[0] + "~" + value16[1];
      }

      this.$http({
        url: this.$http.adornUrl("/home/queryConsumptionRanking"),
        method: "get",
        params: this.$http.adornParams({
          timeRange: _that.timeRange,
          type: "6",
          sortType: true
        })
      })
        .then(({ data }) => {
          if (data && data.code === 0) {
            _that.tableData3 = data.data;
          } else {
          }
        })
        // .catch(err => {
        //   console.log(err, "会员商城消费排行执行失败");
        // });
    },
    picker002(value15) {
      var _that = this;
      if (this.index == 0) {
        _that.timeRange = 1;
      }
      if (this.index == 1) {
        _that.timeRange = 2;
      }

      if (this.index == 2) {
        _that.timeRange = value15[0] + "~" + value15[1];
      }
      this.$http({
        url: this.$http.adornUrl("/home/queryConsumptionRanking"),
        method: "get",
        params: this.$http.adornParams({
          timeRange: _that.timeRange,
          type: "5",
          sortType: "true"
        })
      })
        .then(({ data }) => {
          if (data && data.code === 0) {
            _that.tableData2 = data.data;
          } else {
          }
        })
        // .catch(err => {
        //   console.log(err, "执行失败");
        // });
    },
    picker001(value14) {
      var _that = this;
      if (this.index == 0) {
        _that.timeRange = 1;
      }
      if (this.index == 1) {
        _that.timeRange = 2;
      }
      if (this.index == 2) {
        _that.timeRange = value14[0] + "~" + value14[1];
      }
      this.$http({
        url: this.$http.adornUrl("/home/queryConsumptionRanking"),
        method: "get",
        params: this.$http.adornParams({
          timeRange: _that.timeRange,
          type: "4",
          sortType: "true"
        })
      })
        .then(({ data }) => {
          if (data && data.code === 0) {
            _that.tableData1 = data.data;
          } 
        })
        // .catch(err => {
        //   console.log(err, "执行失败");
        // });
    },

    getData() {
      var _that = this;
      this.$http({
        url: this.$http.adornUrl("/home/queryConsumptionRanking"),
        method: "get",
        params: this.$http.adornParams(
          { timeRange: "1", type: "8", sortType: "true" },
          false
        )
      })
        .then(({ data }) => {
          if (data && data.code === 0) {
            _that.tableData5 = data.data;
          } else {
          }
        })
        // .catch(err => {
        //   console.log(err, "失败执行");
        // });
    }
  }
};
</script>
<style scoped>
.a {
  cursor: pointer;
}
.red {
  background: rgba(224, 224, 224, 1);
}
#Other {
  width: 100%;
  height: 924px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(204, 204, 204, 1);
  margin-top: 24px;
}
.othervipshop {
  width: 496px;
  height: 390px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(204, 204, 204, 1);
  border-radius: 2px;
  float: left;
  margin-top: 32px;
  margin-left: 28px;
}
.othervipshop > p {
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  line-height: 24px;
  text-align: center;
  margin-top: 34px;
}
.othervipshop-news {
  height: 315px;
  width: 100%;
  /* background: wheat; */
  margin-top: 16px;
}
.otherbutton {
  width: 384px;
  height: 36px;
  background: linear-gradient(
    0deg,
    rgba(243, 243, 243, 1),
    rgba(255, 255, 255, 1)
  );
  border: 1px solid rgba(204, 204, 204, 1);
  border-radius: 2px;
  margin-left: 56px;
}
.otherbutton2 {
  width: 384px;
  height: 36px;
  background: linear-gradient(
    0deg,
    rgba(243, 243, 243, 1),
    rgba(255, 255, 255, 1)
  );
  border: 1px solid rgba(204, 204, 204, 1);
  border-radius: 2px;
  margin-left: 56px;
}
.otherbutton3 {
  width: 384px;
  height: 36px;
  background: linear-gradient(
    0deg,
    rgba(243, 243, 243, 1),
    rgba(255, 255, 255, 1)
  );
  border: 1px solid rgba(204, 204, 204, 1);
  border-radius: 2px;
  margin-left: 56px;
}
.otherbutton4 {
  width: 384px;
  height: 36px;
  background: linear-gradient(
    0deg,
    rgba(243, 243, 243, 1),
    rgba(255, 255, 255, 1)
  );
  border: 1px solid rgba(204, 204, 204, 1);
  border-radius: 2px;
  margin-left: 56px;
}
.other-table {
  height: 279px;
  width: 100%;
  /* background: gray; */
}
.othertitle {
  width: 100%;
  height: 48px;
  background: rgba(242, 242, 242, 1);
  border-bottom: 1px solid rgba(204, 204, 204, 1);
  line-height: 48px;
  padding-left: 20px;
}
.othertitle > img {
  width: 16px;
  height: 16px;
}
.othertitle > span {
  text-align: center;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
}
.otherbutton > ul {
  width: 100%;
  height: 100%;
}
.otherbutton2 > ul {
  width: 100%;
  height: 100%;
}
.otherbutton3 > ul {
  width: 100%;
  height: 100%;
}
.otherbutton4 > ul {
  width: 100%;
  height: 100%;
}
ul,
ol {
  list-style: none;
}
.otherbutton > ul > li {
  width: 127px;
  height: 36px;
  float: left;
  line-height: 36px;
  text-align: center;
  border: 0;
}
.otherbutton2 > ul > li {
  width: 127px;
  height: 36px;
  float: left;
  line-height: 36px;
  text-align: center;
  border: 0;
}
.otherbutton3 > ul > li {
  width: 127px;
  height: 36px;
  float: left;
  line-height: 36px;
  text-align: center;
  border: 0;
}
.otherbutton4 > ul > li {
  width: 127px;
  height: 36px;
  float: left;
  line-height: 36px;
  text-align: center;
  border: 0;
}
#otherfive {
  margin-top: 64px;
}
#timefivetime {
  width: 100%;
}
.timeitemone {
  width: 496px;
  height: 390px;
  background: #eeeeee;
  margin-top: -390px;
}
.timeitemone > div {
  width: 496px;
  height: 390px;
}
.timeitemone > div > p {
  text-align: center;
  height: 27px;
  line-height: 27px;
}
.timeitemtwo {
  width: 496px;
  height: 390px;
  background: #eeeeee;
  margin-top: -390px;
}
.timeitemtwo > div {
  width: 496px;
  height: 390px;
}
.timeitemtwo > div > p {
  text-align: center;
  height: 27px;
  line-height: 27px;
}
.timeitemthree {
  width: 496px;
  height: 390px;
  background: #eeeeee;
  margin-top: -390px;
}
.timeitemthree > div {
  width: 496px;
  height: 390px;
}
.timeitemthree > div > p {
  text-align: center;
  height: 27px;
  line-height: 27px;
}
.timeitemfour {
  width: 496px;
  height: 390px;
  background: #eeeeee;
  margin-top: -390px;
}
.timeitemfour > div {
  width: 496px;
  height: 390px;
}
.timeitemfour > div > p {
  text-align: center;
  height: 27px;
  line-height: 27px;
}
</style>